<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>登录</title>
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<meta http-equiv="Cache-Control" content="no-siteapp" />
	<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
	<link href="../../lib/layui/css/layui.css" rel="stylesheet">
	<link href="../../static/css/login.css" rel="stylesheet">
	<script type="text/javascript" src="../../lib/layui/layui.js" charset="utf-8"></script>
</head>

<body>
	<div class="login-container">
		<div class="login-left">
			<div class="pic"> 
				<img src="../../static/images/login-logo.png">
				<img src="../../static/images/login-pic.png">
			</div>
		</div>
		<div class="login-right">
			<div class="title">Welcome to <span>TONGZI</span></div>
			<div class="switch-login">通过账号密码登录，或者切换为<span lay-on="switch-login" data-test="phone">手机验证码登录</span></div>
			<!--Form-->
			<form class="layui-form">
				<div class="demo-login-container">
					<div class="login-form"><!--根据data-test类型插入不同内容--></div>
					<button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-login">登录</button>
				</div>
				<div class="go-register">
					还没有账户？<a href="./user-register.html">点击注册</a>
				</div>
			</form>
			<div class="rights">Copyright © www.AxureUX.com, All Rights Reserved.</div>
		</div>
	</div>
</body>

</html>

<script>

	layui.use(['jquery', 'layer'], function () {
		var $ = layui.$
		var form = layui.form
		var layer = layui.layer
		var util = layui.util

		// 提交事件
		form.on('submit(demo-login)', function (data) {
			var field = data.field; // 获取表单字段值
			// 显示填写结果，仅作演示用
			layer.alert(JSON.stringify(field), {
				title: '当前填写的字段值'
			})
			// 此处可执行 Ajax 等操作
			// …
			return false; // 阻止默认 form 跳转
		})

		layer.ready(function () {
			formFn()
		})

		function formFn(params) {
			var phone = `<div class="layui-form-item">
						<div class="text">手机号码</div>
						<div class="layui-input-wrap">
							<input type="tel" name="phone" placeholder="请输入手机号码" lay-verify="required|phone" autocomplete="off" lay-reqtext="请填写手机号码" lay-affix="clear" class="layui-input demo-phone">
						</div>
					</div>
					<div class="layui-form-item">
						<div class="text">验证码</div>
						<div class="layui-input-wrap">
							<input type="tel" name="vercode" placeholder="请输入验证码" lay-verify="required" autocomplete="off" lay-reqtext="请输入验证码" class="layui-input">
							<button type="button" class="now" lay-on="get-vercode">获取验证码</button>
						</div>
					</div>`
			var account = `<div class="layui-form-item">
						<div class="text">账户</div>
						<div class="layui-input-wrap">
							<input type="text" name="username" value="" lay-verify="required" placeholder="请输入账号" lay-reqtext="请输入账号" autocomplete="off" class="layui-input" lay-affix="clear">
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-input-wrap">
							<input type="password" name="password" value="" lay-verify="required" placeholder="请输入密码" lay-reqtext="请输入密码" autocomplete="off" class="layui-input" lay-affix="eye">
						</div>
					</div>`
			var checkbox = `<div class="layui-form-item no">
						<input type="checkbox" name="remember" lay-skin="primary" title="下次自动登录">
						<a href="./reset-password.html" class="forget">忘记密码？</a>
					</div>`
			if(params === 'phone') {
				$('.login-form').html(`${phone}${checkbox}`)
			} else {
				$('.login-form').html(`${account}${checkbox}`)
			}
			form.render(); // 动态添加类别
		}

		util.on('lay-on', {
			"switch-login" : function () {
				var test = $(this).attr("data-test")
				if (test === 'phone') {
					formFn('phone')
					$(this).html('账户密码登录').attr('data-test','account')
				} else {
					formFn('account')
					$(this).html('手机验证码登录').attr('data-test','phone')
				}
			}
		})

		util.on('lay-on', { 
			// 获取验证码
			"get-vercode": function (obj) {
				var isvalid = form.validate('.demo-phone'); // 主动触发验证，v2.7.0 新增 
				// 验证通过
				if (isvalid) {
					// layer.msg('手机号规则验证通过')
					// 此处可继续书写「发送验证码」等后续逻辑
					countDown(obj)
				}
			}
		})

		// 倒计时
		function countDown(obj) {
			var time = 60
			//消抖，防止用户多次点击发送短信按钮造成读秒过快情况
			obj.attr("disabled", "true");
			let interval = setInterval(() => {
				if (time == 0) {
					clearInterval(interval)
					obj.text("获取验证码");
					obj.removeAttr("disabled")
				} else {
					obj.text(`重新发新${time--}秒`)
				}
			}, 1000)
		}
		
	})
</script>